<template>
  <div class="dashboard">
    <!-- 顶部标题区域 -->
    <div class="header">
      <div class="left-section">
        <div class="plan-button">加载计划</div>
      </div>
      <div class="title">自动生产线看板</div>
      <div class="time">{{ currentTime }}</div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 第一行 -->
      <div class="panel defect-stats">
        <div class="panel-header">一周不良品统计</div>
        <div class="chart-container" ref="badChart"></div>
      </div>

      <div class="panel order-progress">
        <div class="panel-header">订单总体进度</div>
        <div class="progress-panel">
          <div class="donut-container" ref="overallChart"></div>
          <div class="progress-info">
            <div>总体计划 {{ overall.plan }}</div>
            <div>已经生产 {{ overall.produced }}</div>
            <div>不良品 {{ overall.defect }}</div>
            <div>完成率 {{ overall.rate }}%</div>
          </div>
        </div>
      </div>

      <div class="panel order-progress">
        <div class="panel-header">订单今日进度</div>
        <div class="progress-panel">
          <div class="donut-container" ref="todayChart"></div>
          <div class="progress-info">
            <div>今日计划 {{ today.plan }}</div>
            <div>已经生产 {{ today.produced }}</div>
            <div>不良品 {{ today.defect }}</div>
            <div>良品率 {{ today.rate }}%</div>
          </div>
        </div>
      </div>

      <div class="panel team-info">
        <div class="panel-header">当前班组</div>
        <div class="info-content">
          <div>
            <span>名称</span>
            <span>{{ currentGroup.name }}</span>
          </div>
          <div>
            <span>人数</span>
            <span>{{ currentGroup.count }}</span>
          </div>
          <div>
            <span>负责人</span>
            <span>{{ currentGroup.leader }}</span>
          </div>
          <div>
            <span>电话</span>
            <span>{{ currentGroup.phone }}</span>
          </div>
        </div>
      </div>

      <div class="panel exception-list">
        <div class="panel-header">异常列表</div>
        <div class="info-content">
          <div v-if="exceptions.length === 0">无异常</div>
          <div v-else v-for="(e, idx) in exceptions" :key="idx">{{ e }}</div>
        </div>
      </div>

      <!-- 第二行 -->
      <div class="process-section">
        <!-- 关键工序 -->
        <div class="panel">
          <div class="panel-header">关键工序</div>
          <div class="chart-container" ref="radarChart"></div>
        </div>

        <!-- 当日生产率评估 -->
        <div class="panel">
          <div class="panel-header">当日生产率评估</div>
          <div class="rate-panel">
            <div class="rate-item">
              <span class="dot green"></span>
              实际完成率 {{ dailyRate.actual }}%
            </div>
            <div class="rate-item">
              <span class="dot yellow"></span>
              期望完成率 {{ dailyRate.expected }}%
            </div>
            <div class="rate-item">
              <span class="dot red"></span>
              单件耗时 {{ dailyRate.single }}s
            </div>
            <div class="rate-item">
              <span class="dot orange"></span>
              标准耗时 {{ dailyRate.standard }}s
            </div>
          </div>
        </div>

        <!-- 一周产量均差 -->
        <div class="panel">
          <div class="panel-header">一周产量均差</div>
          <div class="chart-container" ref="produceChart"></div>
        </div>
      </div>

      <!-- 近期生产计划列表 -->
      <div class="panel plan-list">
        <div class="panel-header">近期生产计划列表</div>
        <el-table :data="planList" border style="width: 100%">
          <el-table-column prop="order" label="订单号" align="center" />
          <el-table-column prop="qty" label="计划数量" align="center" />
          <el-table-column prop="start" label="计划开始时间" align="center" />
          <el-table-column prop="end" label="计划结束时间" align="center" />
          <el-table-column prop="status" label="订单状态" align="center">
            <template #default="scope">
              <span :class="['status-tag', getStatusClass(scope.row.status)]">
                {{ scope.row.status }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="rate" label="完成率" align="center" />
        </el-table>
      </div>

      <!-- 最近生产产品列表 -->
      <div class="panel product-list">
        <div class="panel-header">最近生产产品列表</div>
        <el-table :data="productList" border style="width: 100%">
          <el-table-column prop="serial" label="产品序列号" align="center" />
          <el-table-column prop="quality" label="产品品质" align="center" />
          <el-table-column prop="time" label="生产时间" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

type PlanItem = { order: string; qty: number; start: string; end: string; status: string; rate: string }

type ProductItem = { serial: string; quality: string; time: string }

const searchText = ref('')
function loadPlan() {
  // 加载计划逻辑
}

const currentTime = ref(new Date().toLocaleString())
let timer: number
onMounted(() => {
  timer = window.setInterval(() => { currentTime.value = new Date().toLocaleString() }, 1000)
  initBadChart()
  initProduceChart()
  initRadarChart()
  initOverallChart()
  initTodayChart()
})
onBeforeUnmount(() => {
  clearInterval(timer)
})

// 一周不良品统计
const badChart = ref<HTMLDivElement>()
function initBadChart() {
  if (!badChart.value) return
  const chart = echarts.init(badChart.value)
  const option = {
    grid: {
      top: 30,
      right: 20,
      bottom: 30,
      left: 40,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6'],
      boundaryGap: false,
      axisLine: {
        lineStyle: { color: '#1e90ff' }
      },
      splitLine: {
        show: true,
        lineStyle: { color: 'rgba(30,144,255,0.1)' }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: { color: '#1e90ff' }
      },
      splitLine: {
        show: true,
        lineStyle: { color: 'rgba(30,144,255,0.1)' }
      }
    },
    series: [{
      data: [4, 3, 3, 3, 5, 1],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: {
        width: 2,
        color: '#00ffff'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(0,255,255,0.3)' },
          { offset: 1, color: 'rgba(0,255,255,0.1)' }
        ])
      },
      itemStyle: {
        color: '#00ffff',
        borderWidth: 2,
        borderColor: '#fff'
      }
    }]
  }
  chart.setOption(option)
}

// 一周产量均差
const produceChart = ref<HTMLDivElement>()
function initProduceChart() {
  if (!produceChart.value) return
  const chart = echarts.init(produceChart.value)
  const option = {
    grid: {
      top: 30,
      right: 20,
      bottom: 30,
      left: 40,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6'],
      boundaryGap: false,
      axisLine: {
        lineStyle: { color: '#1e90ff' }
      },
      splitLine: {
        show: true,
        lineStyle: { color: 'rgba(30,144,255,0.1)' }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: { color: '#1e90ff' }
      },
      splitLine: {
        show: true,
        lineStyle: { color: 'rgba(30,144,255,0.1)' }
      }
    },
    series: [{
      data: [1000, 200, 400, 450, 600, 0],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: {
        width: 2,
        color: '#00ffff'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(0,255,255,0.3)' },
          { offset: 1, color: 'rgba(0,255,255,0.1)' }
        ])
      },
      itemStyle: {
        color: '#00ffff',
        borderWidth: 2,
        borderColor: '#fff'
      }
    }]
  }
  chart.setOption(option)
}

// 关键工序 雷达图
const radarChart = ref<HTMLDivElement>()
function initRadarChart() {
  if (!radarChart.value) return
  const chart = echarts.init(radarChart.value)
  const option = {
    radar: {
      indicator: [
        { name: '压接端子', max: 100 },
        { name: '绕线', max: 100 },
        { name: '焊接', max: 100 },
        { name: '点胶', max: 100 },
        { name: '阻焊', max: 100 },
        { name: '耐压', max: 100 }
      ],
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(30,144,255,0.02)', 'rgba(30,144,255,0.05)']
        }
      },
      axisLine: {
        lineStyle: { color: 'rgba(30,144,255,0.3)' }
      },
      splitLine: {
        lineStyle: { color: 'rgba(30,144,255,0.3)' }
      }
    },
    series: [{
      type: 'radar',
      data: [{
        value: [80, 70, 60, 50, 90, 85],
        name: '实际',
        itemStyle: { color: '#00ff00' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0,255,0,0.3)' },
            { offset: 1, color: 'rgba(0,255,0,0.1)' }
          ])
        }
      }]
    }]
  }
  chart.setOption(option)
}

// 订单总体进度
const overallChart = ref<HTMLDivElement>()
const overall = reactive({ plan: 3000, produced: 1000, defect: 2, rate: 66.67 })
function initOverallChart() {
  if (!overallChart.value) return
  const chart = echarts.init(overallChart.value)
  const option = {
    series: [{
      type: 'pie',
      radius: ['65%', '80%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'center',
        formatter: '{c}%',
        fontSize: 20,
        color: '#fff'
      },
      data: [{
        value: Number(overall.rate),
        name: '已生产',
        itemStyle: { color: '#00ff00' }
      }, {
        value: 100 - Number(overall.rate),
        name: '待生产',
        itemStyle: { color: '#1e90ff' }
      }]
    }]
  }
  chart.setOption(option)
}

// 订单今日进度
const todayChart = ref<HTMLDivElement>()
const today = reactive({ plan: 1000, produced: 100, defect: 1, rate: '98' })
function initTodayChart() {
  if (!todayChart.value) return
  const chart = echarts.init(todayChart.value)
  const option = {
    series: [{
      type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false,
      label: { show: true, position: 'center', formatter: '{b}' },
      data: [{ value: today.produced, name: '已生产' }, { value: today.plan - today.produced, name: '待生产' }]
    }]
  }
  chart.setOption(option)
}

// 当前班组
const currentGroup = reactive({ name: '磁阻2线1班', count: 5, leader: '赵轲', phone: '18665802636' })

// 异常列表
const exceptions = ref<string[]>([])

// 当日产率评估
const dailyRate = reactive({ actual: 10, expected: 20, single: 32, standard: 30 })

// 近期生产计划列表
const planList = ref<PlanItem[]>([
  { order: '1', qty: 1, start: '2025-06-14 16:01:00', end: '2025-05-30 16:01:00', status: '创建', rate: '1%' },
  { order: '123', qty: 123, start: '2025-05-30 01:44:00', end: '2025-05-02 01:44:00', status: '', rate: '0%' },
  { order: '20250527', qty: 1000, start: '2025-05-27 14:44:00', end: '2025-05-27 17:44:00', status: '订单结束', rate: '100%' },
  { order: 'DD2024080902', qty: 1000, start: '2024-08-10 08:13:00', end: '2024-08-11 08:13:00', status: '进行中', rate: '64%' },
  { order: 'DD2024080901', qty: 1000, start: '2024-08-09 20:55:00', end: '2024-08-12 20:55:00', status: '进行中', rate: '45%' },
  { order: 'DD2024072201', qty: 3000, start: '2024-07-22 07:57:00', end: '2024-07-30 09:01:00', status: '进行中', rate: '20%' }
])

// 最近生产产品列表
const productList = ref<ProductItem[]>([])

function getStatusClass(status: string): string {
  switch (status) {
    case '创建':
      return 'status-created'
    case '进行中':
      return 'status-processing'
    case '订单结束':
      return 'status-completed'
    default:
      return ''
  }
}
</script>

<style scoped>
.dashboard {
  background: #0a1949;
  min-height: 100vh;
  padding: 20px;
  color: #fff;
  position: relative;
}

/* 顶部标题装饰 */
.dashboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 80px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 80"><path d="M0,40 C150,40 150,20 300,20 C450,20 450,40 600,40 C450,40 450,60 300,60 C150,60 150,40 0,40" fill="none" stroke="%231e90ff" stroke-width="2"/></svg>') no-repeat center;
  opacity: 0.3;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}

.left-section {
  display: flex;
  align-items: center;
  background: rgba(30, 144, 255, 0.1);
  padding: 4px;
  border: 1px solid #1e90ff;
}

.plan-button {
  background: linear-gradient(to bottom, #1e90ff, #0066cc);
  padding: 4px 12px;
  cursor: pointer;
  font-size: 13px;
}

.title {
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  position: relative;
  padding: 0 60px;
}

.time {
  color: #fff;
  font-size: 13px;
  position: absolute;
  right: 0;
  top: 0;
}

.content {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 16px;
}

/* 第一行布局 */
.defect-stats {
  grid-column: span 6;
  height: 220px;
}

.order-progress {
  grid-column: span 6;
  height: 220px;
}

.team-info,
.exception-list {
  grid-column: span 3;
  height: 220px;
}

/* 第二行布局 */
.process-section {
  grid-column: span 6;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}

.plan-list {
  grid-column: span 12;
}

.product-list {
  grid-column: span 6;
}

/* 面板样式 */
.panel {
  background: rgba(16, 31, 53, 0.6);
  border: 1px solid #1e90ff;
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(90deg, #1e90ff40 0%, transparent 100%);
  border-bottom: 1px solid #1e90ff;
}

.panel-header {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  color: #1e90ff;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

/* 图表样式 */
.chart-container {
  height: calc(100% - 32px);
  padding: 12px;
}

/* 环形进度图样式 */
.progress-panel {
  display: flex;
  padding: 16px;
  height: calc(100% - 32px);
  align-items: center;
}

.donut-container {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-info {
  flex: 1;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.progress-info div {
  margin: 8px 0;
  color: #fff;
  font-size: 13px;
}

/* 表格样式 */
:deep(.el-table) {
  background-color: transparent !important;
  color: #fff !important;
  font-size: 11px;
}

:deep(.el-table th) {
  background-color: rgba(30, 144, 255, 0.1) !important;
  color: #1e90ff !important;
  font-weight: normal;
  border-bottom: 1px solid #1e90ff !important;
  padding: 8px 0;
}

:deep(.el-table td) {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(30, 144, 255, 0.3) !important;
  padding: 8px 0;
}

:deep(.el-table--border) {
  border: 1px solid #1e90ff !important;
}

:deep(.el-table--border th),
:deep(.el-table--border td) {
  border-right: 1px solid rgba(30, 144, 255, 0.3) !important;
}

/* 状态标签 */
.status-tag {
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 11px;
}

.status-created {
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.status-processing {
  background: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.status-completed {
  background: rgba(250, 173, 20, 0.1);
  color: #faad14;
}

/* 信息面板 */
.info-content {
  padding: 16px;
  height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-content div {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 13px;
}

.info-content span:first-child {
  margin-bottom: 4px;
}

.info-content span:last-child {
  margin-left: 8px;
}

/* 评估指标 */
.rate-panel {
  padding: 16px;
  height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rate-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 13px;
  color: #fff;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  display: inline-block;
}

.green {
  background: #52c41a;
}

.yellow {
  background: #faad14;
}

.red {
  background: #f5222d;
}

.orange {
  background: #fa8c16;
}

/* 图表通用样式 */
:deep(.echarts-container) {
  background: transparent !important;
}

:deep(.echarts-container canvas) {
  border-radius: 0 !important;
}
</style>
